<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 径向渐变</title>
    <style>
        .box {
            width: 360px;
            height: 200px;
            border: 5px solid hsla(60, 50%, 80%, .8);
        }
        
        .demo-1 {
            background: repeating-linear-gradient(to right, red, green 25px, lightcoral 50px);
        }

        .demo-2 {
            background: repeating-radial-gradient(red, green 30px, yellowgreen 60px)
        }

        .notepad-box {
            height: 480px;
            position: relative;
            background: repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px)
        }

        .notepad-box::before {
            content: "";
            display: inline-block;
            height: 480px;
            width: 4px;
            border-left: 4px double #FCA1A1;
            position: absolute;
            left: 30px;
        }
    </style>
</head>

<body>
    <div class="box demo-1"></div>
    <div class="box demo-2"></div>
    <div class="box notepad-box"></div>
</body>

</html>